<template>
  <div>
    <div class="btn">
      <el-button :type="active == 'qy' ? 'primary' : ''" @click="checkTab(1)"
        >企业主体</el-button
      >
      <el-button :type="active == 'gt' ? 'primary' : ''" @click="checkTab(2)"
        >个人主体</el-button
      >
      <el-button  @click="seeAll"
        >查看所有</el-button
      >
    </div>
    <div class="amap-wrapper">
      <el-amap
        class="amap-box"
        :vid="'amap-vue'"
        :center="center"
        :zoom.sync="zoom"
        :zoomEnable="zoomEnable"
        :zooms="[4, 13]"
        ref="am"
        :events="events"
        v-loading="loading"
      >
        <el-amap-marker
          v-for="(marker, index) in markers"
          :position="marker.position"
          :vid="index"
          :key="'map-' + index"
        >
          <div class="ball" @click="setzoom(marker, type)">
            <p>{{ marker.label }}</p>
            <p>{{ marker.count | num }}</p>
          </div>
          <!-- <div class="ball" @click="setzoom(marker, 0)" v-if="type == 0">
            <p>{{ marker.label }}</p>
            <p>{{ marker.count | num }}</p>
          </div>
          <div class="ball" @click="setzoom(marker, 1)" v-if="type == 1">
            <p>{{ marker.label }}</p>
            <p>{{ marker.count | num }}</p>
          </div> -->
          <!-- <div class="company" v-if="type==2">
            <p>{{ marker.label }}</p>
          </div> -->
        </el-amap-marker>
      </el-amap>
    </div>
    <div class="table-box">
      <div class="info-table">
        <template v-for="(marker, index) in markers">
          <div :key="index" v-if="marker.count">
            {{ marker.label }}&nbsp; &nbsp; &nbsp; {{ marker.count | num }}
          </div>
        </template>
      </div>
    </div>
  </div>
</template>

<script>
import api from "@/api/index/index.js";
export default {
  data() {
    let zoom = 4;
    let type = 0;
    let that = this;
    return {
      active: "qy",
      loading: true,
      zoom,
      center: [121.487899486, 31.24916171],
      // lng:121.487899486,
      // lat:31.24916171,
      markers: [],
      zoomEnable: true,
      type,
      map: null,
      centerName: "广东省",
      events: {
        init() {
          that.map = that.$refs["am"].$$getInstance();
        },
        zoomstart(e) {
          that.zoomstart();
        },
      },
    };
  },

  created() {
    this.search();
  },
  methods: {
    checkTab(type) {
      this.active = type == 1 ? "qy" : "gt";
      this.search(type);
    },
    seeAll(){
      this.type = 0;
      this.search();
      this.zoom = 4;
    },
    search(type) {
      this.loading = true;
      let lat = this.center[1];
      let lng = this.center[0];
      api.mapData(
        { type, level: this.type, lat, lng },
        (res) => {
          this.loading = false;
          let geo = [];
          let id = 0;
          if (res.code == 200) {
            let geo = [];
            for (let i = 0; i < res.data.length; i++) {
              let item = res.data[i];
              if (item.company_num > 0 && item.longitude && item.latitude) {
                geo.push({
                  position: [item.longitude, item.latitude],
                  label: item.cityname,
                  count: item.company_num,
                  value: item.id,
                });
              }
            }
            this.markers = geo;
          }
        },
        (err) => {
          this.loading = false;
        }
      );
    },
    zoomstart() {
      let zoom = this.map.getZoom();
      console.log(zoom);
      if (zoom == 8) {
        this.type = 1;
        this.search();
      }
      if (zoom == 4) {
        this.type = 0;

        this.search();
      }
      if (zoom == 12) {
        this.type = 2;

        this.search();
      }
    },
    setzoom(marker, type) {
      this.center = marker.position;
      switch (type) {
        case 0:
          this.type++;
          this.zoom = 8;
          break;
        case 1:
          this.type++;
          this.zoom = 12;
          break;
      }
    },
  },
  filters: {
    num(val) {
      if (val > 10000) {
        return parseInt(val / 10000) + "万+";
      }
      return val;
    },
  },
};
</script>

<style lang="scss" scoped>
.amap-wrapper {
  margin: 0 auto;
  width: 1200px;
  height: 700px;
}
.ball {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  // padding: 15px 10px;
  width: 50px;
  height: 50px;
  padding: 10px;
  font-size: 12px;
  color: #fff;
  background: #318fff;
  border-radius: 50%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: center;
  box-shadow: 1px 1px 1px #888888;
}
.company {
  display: block;
  color: #fff;
  border-radius: 5px;
  background: #318fff;
  padding: 5px 12px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: center;
}
.table-box {
  width: 100%;
  padding-top: 20px;
  font-weight: 200;
  font-size: 14px;
  line-height: 36px;
  .info-table {
    width: 100%;
    padding: 0;
    text-align: center;
    border-collapse: separate;
    border-spacing: 36px 18px;
    text-align: left;
    div {
      display: inline-block;
      text-align: center;
      line-height: 40px;
      width: 23%;
      margin-left: 20px;
      border-bottom: 1px solid #f0f0f0;
    }
  }
}
.btn {
  padding: 10px;
}
.el-button--mini,
.el-button--small {
  font-size: 8px;
}
</style>
